import * as React from "react"
import { inject, observer } from "mobx-react"
import { Text, TouchableWithoutFeedback, View, ViewStyle, Image } from "react-native"
// import { Icon, Image } from "react-native-elements"
import { images } from "../../assets"
import { px2dp } from "../../utils"
// import { NormalModal } from "../../components/normal-modal"

export interface AuthProps {
  rootStore?: any
  history?: any
}

const styledBanner: ViewStyle = {
  padding: px2dp(6),
  backgroundColor: "#f6f6f6"
}

// const styledBannerImage: ImageStyle = {
//   width: "100%",
//   height: px2dp(132),
// }

const styledListItem: ViewStyle = {
  paddingLeft: px2dp(16),
  backgroundColor: "#fff"
}

const styledListItemContent: ViewStyle = {
  flexDirection: "row",
  alignItems: "center",
  paddingRight: px2dp(10),
  justifyContent: "space-between",
  borderBottomWidth: px2dp(1),
  borderBottomColor: "#F3F4F6",
  borderStyle: "solid",
  height: px2dp(54)
}

// 定义一个基础默认样式组件
function MineListItem(props: any) {
  return (
    <TouchableWithoutFeedback onPress={props.onPress}>
      <View style={[styledListItem, props.style]}>
        <View style={styledListItemContent}>
          <View style={{ flexDirection: "row", alignItems: "center" }}>
            <Image style={{ width: px2dp(20), height: px2dp(20) }} source={props.source} />
            <Text style={{ marginLeft: px2dp(8), fontSize: 15 }}>{props.text}</Text>
          </View>
          {/* <Icon color="#ccc" name="play-arrow" /> */}
        </View>
      </View>
    </TouchableWithoutFeedback>
  )
}

@inject("rootStore")
@observer
class NormalScreen extends React.Component<AuthProps, {}> {
  // constructor(props) {
  //   super(props)
  // }
  render() {
    const globalStore = this.props.rootStore.globalStore
    return (
      <View>
        <View style={styledBanner}>
          {/* <Image */}
          {/*  resizeMode="center" */}
          {/*  style={styledBannerImage} */}
          {/*  source={images.public.activity.firstDepositOffer} */}
          {/* /> */}
        </View>
        <MineListItem
          source={images.mine.icons.listFundDetails}
          text="资金明细"
          onPress={() => {
            console.log("进入资金明细")
          }}
        />
        <MineListItem
          source={images.mine.icons.listBettingRecord}
          text="投注记录"
          onPress={() => this.props.history.push("/mineBetRecord")}
        />
        <MineListItem
          source={images.mine.icons.listBettingRecord}
          style={{ marginTop: px2dp(10) }}
          text="安全中心"
          onPress={() => this.props.history.push("/securityCenter")}
        />
        {globalStore.isLogin ? (
          <MineListItem source={images.mine.icons.listLetter} text="站内信" />
        ) : null}
        <MineListItem source={images.mine.icons.listPromotions} text="优惠活动" />
        <MineListItem
          source={images.mine.icons.listPromotions}
          text="VIP中心"
          onPress={() => {
            this.props.history.push("./vip")
          }}
        />
        <MineListItem source={images.mine.icons.listAgencyCooperation} text="代理合作" />
        <MineListItem
          source={images.mine.icons.listAgencyCooperation}
          style={{ marginTop: px2dp(10) }}
          text="赞助信息"
        />
        <MineListItem source={images.mine.icons.listHelpCenter} text="帮助中心" />
        <MineListItem source={images.mine.icons.listGameTutorial} text="玩法教程" />
        <MineListItem source={images.mine.icons.listShareIt} text="分享APP" />
        <MineListItem
          source={images.mine.icons.listAboutUs}
          text="关于我们"
          onPress={() => {
            this.props.history.push("./aboutUs")
          }}
        />
        <MineListItem source={images.mine.icons.listVersionNumber} text="版本号" />
        {globalStore.isLogin ? (
          <MineListItem
            source={images.mine.icons.listDropOut}
            style={{ marginTop: px2dp(10) }}
            text="退出登录"
            onPress={() => globalStore.showLogoutModal()}
          />
        ) : null}
        {/* <NormalModal */}
        {/*  visible={globalStore.logoutModalVisible} */}
        {/*  title={"安全退出"} */}
        {/*  subTitle={"请确认是否退出当前登录账号"} */}
        {/*  closeModal={() => globalStore.closeLogoutModal()} */}
        {/*  confirmLogout={() => globalStore.confirmLogout()} */}
        {/* /> */}
      </View>
    )
  }
}
export default NormalScreen
